<!--
 * @Author: alenjzhang
 * @Date: 2024-03-20 22:39:54
 * @Description: 体检信息
-->
<script setup lang="ts">
import {
	CAPABILITY_ASSESSMENT_ENUM,
	COGNITIVE_ASSESSMENT_ENUM,
	INPUT_PLACEHOLDER,
	SCENE_ENUM,
} from '@/const/index.ts';
import { useCareLevel } from '@/hooks';
import { useCareStore } from '@/store';
import { usePackageStore } from '@/store/package'
import type { FormProps } from '@/types'
import { storeToRefs } from 'pinia';
import { isEmpty } from 'radash';
import { toRefs, watch } from 'vue';


useCareLevel();
const { levels, levelsMap } = storeToRefs(useCareStore());
const { packages, packagesMap } = storeToRefs(usePackageStore());
const { setPackageByLevel } = usePackageStore();
const props = defineProps<FormProps>()

const { readonly, validateInfos, formState } = toRefs(props);

watch(() => props.formState?.careLevel, (level) => {
	if (!isEmpty(level)) {
		setPackageByLevel(level as any);
	}
}, {
	immediate: true
})

</script>

<template>
	<a-form-item label="身高" class="thirtyPercentWidth">
		<a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER" v-model:value="formState.height">
			<template #suffix>cm</template>
		</a-input>
		<span v-else>{{ formState.height }}</span>
	</a-form-item>
	<a-form-item label="体重" class="thirtyPercentWidth">
		<a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER" v-model:value="formState.weight">
			<template #suffix>kg</template>
		</a-input>
		<span v-else>{{ formState.weight }}</span>
	</a-form-item>
	<a-form-item label="视力" class="thirtyPercentWidth">
		<a-radio-group v-if="!readonly" :options="SCENE_ENUM.options"
			v-model:value="formState.vision"></a-radio-group>
		<span v-else>{{ SCENE_ENUM.map[formState.vision] }}</span>
	</a-form-item>
	<a-form-item label="听力" class="thirtyPercentWidth">
		<a-radio-group v-if="!readonly" :options="SCENE_ENUM.options"
			v-model:value="formState.hearing"></a-radio-group>
		<span v-else>{{ SCENE_ENUM.map[formState.hearing] }}</span>
	</a-form-item>
	<a-form-item label="皮肤情况" class="thirtyPercentWidth">
		<a-radio-group v-if="!readonly" :options="SCENE_ENUM.options"
			v-model:value="formState.skinCondition"></a-radio-group>
		<span v-else>{{ SCENE_ENUM.map[formState.skinCondition] }}</span>
	</a-form-item>
	<a-form-item label="血压" class="thirtyPercentWidth">
		<a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER"
			v-model:value="formState.blooPressure">
				<template #suffix>
					mmHg
				</template>
			</a-input>
		<span v-else>{{ formState.blooPressure }}</span>
	</a-form-item>
	<a-form-item label="血脂" class="thirtyPercentWidth">
		<a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER"
			v-model:value="formState.bloodLipids">
				<template #suffix>mmol/L</template>
			</a-input>
		<span v-else>{{ formState.bloodLipids }}</span>
	</a-form-item>
	<a-form-item label="血糖" class="thirtyPercentWidth">
		<a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER"
			v-model:value="formState.bloodSugar">
				<template #suffix>mmol/L</template>
			</a-input>
		<span v-else>{{ formState.bloodSugar }}</span>
	</a-form-item>
	<a-form-item label="心率" class="thirtyPercentWidth">
		<a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER"
			v-model:value="formState.heartRate">
				<template #suffix>(次/分钟)</template>
			</a-input>
		<span v-else>{{ formState.heartRate }}</span>
	</a-form-item>
	<a-form-item label="能力评估" class="thirtyPercentWidth" v-bind="validateInfos.capability">
		<a-select v-if="!readonly" :options="CAPABILITY_ASSESSMENT_ENUM.options"
			:placeholder="INPUT_PLACEHOLDER" v-model:value="formState.capability"></a-select>
		<span v-else>{{ CAPABILITY_ASSESSMENT_ENUM.map[formState.capability] }}</span>
	</a-form-item>
	<a-form-item label="认知评估" class="thirtyPercentWidth" v-bind="validateInfos.cognitive">
		<a-select v-if="!readonly" :options="COGNITIVE_ASSESSMENT_ENUM.options" :placeholder="INPUT_PLACEHOLDER"
			v-model:value="formState.cognitive"></a-select>
		<span v-else>{{ COGNITIVE_ASSESSMENT_ENUM.map[formState.cognitive] }}</span>
	</a-form-item>
	<a-form-item label="照护等级" class="thirtyPercentWidth" v-bind="validateInfos.careLevel">
		<a-select v-if="!readonly" :options="levels" :placeholder="INPUT_PLACEHOLDER"
			v-model:value="formState.careLevel"></a-select>
		<span v-else>{{ levelsMap.get(formState.careLevel as any) }}</span>
	</a-form-item>
	<a-form-item label="服务包" class="thirtyPercentWidth" v-bind="validateInfos.packages">
		<a-select v-if="!readonly" mode="multiple" :options="packages" :placeholder="INPUT_PLACEHOLDER"
			v-model:value="formState.packages"></a-select>
		<span v-else>{{ formState.packages.map(id => packagesMap.get(id)).join(',') }}</span>
	</a-form-item>
</template>
